<g:if test="${!ajaxCall}">
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <meta name="layout" content="save_undo" />
      <title>${Inter.printOut('Show Employee',session.language)}</title>
    </head>
    <body>
      <g:link controller="project" action="updateHours" class="urlHoursArrow"></g:link>
      <div class="undernav">
        <span class="menuButton"><g:link class="createEmployee" action="create">${Inter.printOut('New Employee',session.language)}</g:link></span>
        <!-- This is the help button. -->
        <%  def help = Help.findByNameAndLanguage("employee_show", session.language)
        def helplink = createLink(action:'show', controller:'help', id: help?.id )
        %>
        <a href="#" class="menulink" onClick="MyWindow=window.open('${helplink}','Help','width=350,height=450'); return false;">${Inter.printOut('Help',session.language)}</a>
        <!-- This is the end of the help button. -->
      </div>
      <%
      def worksInProjects = false
      if(session.mode.equalsIgnoreCase("budget")){
        def projList = Whoa.findByMemberAndWorksInCourseIsNull(employeeInstance)
        worksInProjects = (projList!=null)
      }
      %>
    <div class="body"style="width:98%;">
</g:if>
      <div class="showEmpl" style="width:98%; margin-top:10px">
        <div style="width:100%; border: 1px solid #ccc;">
          <div class="emplPic" style="float:left; margin:10px 0px 10px 20px; width:128px;">
            <img src="${resource(dir:'images/skin',file:'employee_pic.png')}" alt="Employee" style="margin-top:10px;" />
          </div>
          <div class="emplInfo" style="float:left;margin:5px 0px 5px 20px; width:40%">
            <h2 style="margin-left:5px;">${fieldValue(bean:employeeInstance, field:'firstName')} ${fieldValue(bean:employeeInstance, field:'lastName')}</h2>
            <table style="border:none;table-layout: fixed; ">
              <tbody>
                <tr>
                  <td valign="top" class="name"><b>${Inter.printOut('Title',session.language)}:</b> ${fieldValue(bean:employeeInstance, field:'title')}</td>
                  <td valign="top" class="name"><b>${Inter.printOut('Salary(Month)',session.language)}:</b> <g:formatNumber number="${employeeInstance.salary}" format="###"/> Kr</td>
              </tr>

              <tr class="prop">
                <td valign="top" class="name"><b>${Inter.printOut('Date of Birth',session.language)}</b>: <g:formatDate date="${employeeInstance.dob}" format="yyyy-MM-dd"/></td>
              <td valign="top" class="name"><b>${Inter.printOut('Salary(Year)',session.language)}:</b> <g:formatNumber number="${employeeInstance.yearlySalary()}" format="###"/> Kr</td>
              </tr>
              <tr>
                <td valign="top" class="name"><b>${Inter.printOut('Address',session.language)}:</b> ${fieldValue(bean:employeeInstance, field:'street')}, <g:formatNumber number="${employeeInstance.zipCode}" format="00000"/> ${fieldValue(bean:employeeInstance, field:'city')}</td>
              <td valign="top" class="name"><b>${Inter.printOut('Percentage Work:',session.language)}</b> <g:formatNumber number="${employeeInstance.percentageWork}" format="###"/> %</td>
              </tr>
              <tr>
                <td valign="top" class="name"><b>${Inter.printOut('Email:',session.language)}</b> ${fieldValue(bean:employeeInstance, field:'email')}</td>
                <td valign="top" class="name"><b>${Inter.printOut('Hours Per Year',session.language)}:</b> <g:formatNumber number="${employeeInstance.workingHoursPerYear}" format="###"/> h</td>
              </tr>
              <tr>
                <td valign="top" class="phoneNumber"><b>${Inter.printOut('Phone number:',session.language)}</b> ${fieldValue(bean:employeeInstance, field:'phoneNumber')}</td>
                <td valign="top" class="name"><b>${Inter.printOut('Hired By',session.language)}:</b> ${employeeInstance?.hiredBy?.name}
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="buttons" style="clear:both">
            <%
            def a = session.access
            a.refresh()
            %>
            <g:if test="${(!session.mode.equalsIgnoreCase('budget')) || (session.mode.equalsIgnoreCase('budget') && !a.isBudgetLocked()) || (session.mode.equalsIgnoreCase('budget') && a.isBudgetLocked() && !worksInProjects)}">
              <g:form>
                <input type="hidden" name="id" id="ajaxEmployeeId" value="${employeeInstance?.id}" />
                <span class="button"><g:actionSubmit class="editEmployee" value="${Inter.printOut('Edit',session.language)}" action="Edit" /></span>
                <span class="button"><g:actionSubmit class="deleteEmployee" onclick="return confirm('${Inter.printOut('Sure',session.language)}');" value="${Inter.printOut('Delete',session.language)}" action="Delete" /></span>
              </g:form>
            </g:if>
            <g:else>
              Budget locked, employee not editable
            </g:else>
          </div>
        </div>
        <div class="projectDetails" style="clear:both">
            <h2>${Inter.printOut('Total workload (for current year)',session.language)}</h2> <!--  margin-top:25px; -->
              <!-- Link useful for javascript -->
              <g:link class="urlUpdate" controller="employee" action="updateFigures"></g:link>
              <g:link class="urlArrow" controller="employee" action="updateFigures"></g:link>
              <g:link class="urlUpdateHours" controller="project" action="updateHours"></g:link> <!-- This is refering to the METHOD updateHours. In this case the method and the id is the same for hours in the project. -->
              <!-- end useful link which don't appear in the page -->
            <table class="generalHours" width="100%" style="table-layout: fixed">
               <thead>
                <tr>
                  <!--Admin creating accounts shall be able to fill in nr of hours worked per year OR percent per year -->
                  <th>${Inter.printOut('Percentage Work',session.language)} (%)</th>  <!--inputHours/totalHours -->
                  <th>${Inter.printOut('Working hours',session.language)} (h)</th>    <!--inputHours -->
                  <th>${Inter.printOut('Work not assigned',session.language)} (%)</th>           <!--(total-actualHours)/ -->
                  <th>${Inter.printOut('Hours not assigned',session.language)} (h)</th>          <!--actualHours -->
                </tr>
              </thead>                                 <!--to add picture      <img src="url(../images/skin/users.png)" /> -->
              <tbody>
                <tr>
                  <td>
                    <g:if test="${(!session.mode.equalsIgnoreCase('budget')) || (session.mode.equalsIgnoreCase('budget') && !a.isBudgetLocked())}">
                      <span id ="percentageWork" class="editableFigures" ><g:formatNumber number="${employeeInstance?.percentageWork}" format="###"/> <img alt="edit" style="vertical-align:text-bottom;" src="${resource(dir:'images/skin',file:'pencil.png')}"/></span>
                      <span id="percentageWorkUpArrow" class="editableFiguresArrow" ><img alt="up" style="vertical-align:text-bottom;" src="${resource(dir:'images',file:'up2.png')}"/></span>
                      <span id="percentageWorkDownArrow" class="editableFiguresArrow" ><img alt="down" style="vertical-align:text-bottom;" src="${resource(dir:'images',file:'down2.png')}"/></span>
                    </g:if>
                    <g:else>
                      <span id ="percentageWork" ><g:formatNumber number="${employeeInstance?.percentageWork}" format="###"/></span>
                    </g:else>
                  </td>     <!--incomeFigures is the class for dubbelclikcing, employeeInstance.percentageWork OR getPercentageWorkingFrom(hour) -->
                  <td>
                    <g:if test="${(!session.mode.equalsIgnoreCase('budget')) || (session.mode.equalsIgnoreCase('budget') && !a.isBudgetLocked())}">
                      <span id ="hoursWork"  class="editableFigures"><g:formatNumber number="${employeeInstance?.getWorkingHoursPerYear()}" format="###"/> <img alt="edit" style="vertical-align:text-bottom;" src="${resource(dir:'images/skin',file:'pencil.png')}"/></span>

                    </g:if>
                    <g:else>
                      <span id ="hoursWork"><g:formatNumber number="${employeeInstance?.getWorkingHoursPerYear()}" format="###"/></span>
                    </g:else>
                  </td><!--employeeInstance.percentageWork*getWorkingHoursPerYear OR hour -->
                  <td><g:formatNumber number="${employeeInstance?.percentageNotAssigned()}" format="###"/></td><!--(above-employeeInstance.actualWorkingHoursPerYear())/above-->
                  <td><g:formatNumber number="${employeeInstance?.hoursNotAssigned()}" format="###"/></td><!--2above-employeeInstance.actualWorkingHoursPerYear() -->
                </tr>
              </tbody>
            </table>

<!-- PROJECT TABLE --------------------->
     
            <h2>${Inter.printOut('Project workload',session.language)}</h2>
            <g:if test="${nbProjects && (nbProjects > 0)}">
              <table class="sortableTable {sortlist: [[0,0]]}" style="table-layout: fixed" width="99%">
            </g:if>
            <g:else>
              <table class="sortableTable" style="table-layout: fixed" width="99%">
            </g:else>
              <thead>                                  <!--totalHours = 1700 or 1732 (getWorkingHoursPerYear), inputHours = hours input when employee created (getPercentageWorkingFromHours()), actualHours = sum of hours in list of project (actualWorkingHoursPerYear())(-->
                  <tr>
                    <th width="30%" class="{sorter: 'link'}"><span class="a">${Inter.printOut('Active in Project',session.language)}</span></th>
                    <th width="30%" class="{sorter: 'numeric'}"><span class="a">${Inter.printOut('Hours',session.language)} (h)</span></th>
                    <th width="18%" class="{sorter: 'numeric'}"><span class="a">${Inter.printOut('Percentage',session.language)} (%)</span></th>
                  </tr>
                </thead>
                <tbody>
                <g:each var="m" in="${whoaList}">
                  <!-- for every element (m, a whoa) in the list (whoaList) -->
                  <g:if test="${(!m.forCourse())}">
                    <g:if test="${ModeAccess.isAvailableInCurrentMode(session.mode,m?.member?.mode)}">
                      <tr>
                        <td><g:link action="show" controller="project" id="${m?.worksInProject?.id}">${m?.worksInProject?.name}</g:link></td>
                        <td>
                          <g:if test="${(!session.mode.equalsIgnoreCase('budget')) || (session.mode.equalsIgnoreCase('budget') && !a.isBudgetLocked()) || (session.mode.equalsIgnoreCase('budget') && a.isBudgetLocked() && !worksInProjects)}">
                            <span class="hoursFigures" id="updateHours" title="${m.id}"><g:formatNumber number="${m?.hours}" format="###"/> <img alt="edit" style="vertical-align:text-bottom;" src="${resource(dir:'images/skin',file:'pencil.png')}"/></span>
                          </g:if>
                          <g:else>
                            <span id="updateHours" title="${m.id}"><g:formatNumber number="${m?.hours}" format="###"/></span>
                          </g:else>
                        </td>
                        <td>
                          <g:if test="${(!session.mode.equalsIgnoreCase('budget')) || (session.mode.equalsIgnoreCase('budget') && !a.isBudgetLocked()) || (session.mode.equalsIgnoreCase('budget') && a.isBudgetLocked() && !worksInProjects)}">
                            <span id="percentageWorkUpArrowProject" class="editableFiguresArrowHours" title="${m?.id}" ><img alt="up" style="vertical-align:text-right;" src="${resource(dir:'images',file:'up2.png')}"/></span>
                            <span id="percentageWorkDownArrowProject" class="editableFiguresArrowHours" title="${m?.id}" ><img alt="down" style="vertical-align:text-right;" src="${resource(dir:'images',file:'down2.png')}"/></span>
                            <span class="hoursFigures" id="updateProjectPercentage" title="${m.id}"><g:formatNumber number="${m?.percentagePerProject()}" format="###"/><img alt="edit" style="vertical-align:text-bottom;" src="${resource(dir:'images/skin',file:'pencil.png')}"/></span>
                          </g:if>
                          <g:else>
                            <span id="updateProjectPercentage" title="${m.id}"><g:formatNumber number="${m?.percentagePerProject()}" format="###"/></span>
                          </g:else>
                        </td>  <!-- Percentage calculated from worked hours in a specific project in relation to total worked hours for that year -->
                      </tr>
                          <!-- <g:formatNumber number="${m?.member?.salary}" format="SEK ##,##0" />-->
                    </g:if>
                  </g:if><g:else></g:else>
                </g:each>
                </tbody>
              </table>
              <table class="total">
                <tr class="boldFormat">
                  <td width="30%">${Inter.printOut('Total',session.language)}:</td>
                  <td width="30%"><g:formatNumber number="${employeeInstance.actualWorkingHoursProject()}" format="###"/></td>
                  <td width="18%"><g:formatNumber number="${employeeInstance.actualWorkingPercentageProject()}" format="###"/></td>
                </tr>
              </table>

<!-- EDUCATIONAL WORKLOAD -------------------------->

            <g:if test="${ModeAccess.isAvailableInCurrentMode(session.mode,0)}">
              <h2>${Inter.printOut('Educational workload',session.language)}</h2>
              <g:if test="${nbCourses && (nbPCourses > 0)}">
                <table class="sortableTable {sortlist: [[0,0]]} " style="table-layout: fixed">
              </g:if>
              <g:else>
                <table class="sortableTable" style="table-layout: fixed">
              </g:else>
                <thead>                                  <!--totalHours = 1700 or 1732 (getWorkingHoursPerYear), inputHours = hours input when employee created (getPercentageWorkingFromHours()), actualHours = sum of hours in list of project (actualWorkingHoursPerYear())(-->
                  <tr>
                    <th width="30%" class="{sorter: 'link'}"><span class="a">${Inter.printOut('Active in Course',session.language)}</span></th>
                    <th width="30%" class="{sorter: 'numeric'}"><span class="a">${Inter.printOut('Hours',session.language)} (h)</span></th>
                    <th width="18%" class="{sorter: 'numeric'}"><span class="a">${Inter.printOut('Percentage',session.language)} (%)</span></th>
                  </tr>
                </thead>
                <tbody>
                  <g:each var="m" in="${whoaList}">       <!-- for every element (m, a whoa) in the list (whoaList) -->
                    <g:if test="${(m.forCourse())}">
                     <g:if test="${ModeAccess.isAvailableInCurrentMode(session.mode,m?.member?.mode)}">
                      <tr>
                        <td><g:link action="show" controller="course" id="${m?.worksInCourse?.id}">${m?.worksInCourse?.name} </g:link></td>
                        <td>
                          <g:if test="${(!session.mode.equalsIgnoreCase('budget')) || (session.mode.equalsIgnoreCase('budget') && !a.isBudgetLocked()) || (session.mode.equalsIgnoreCase('budget') && a.isBudgetLocked() && !worksInProjects)}">
                            <span class="hoursFigures" id="updateHours" title="${m.id}"><g:formatNumber number="${m?.hours}" format="###"/> <img alt="edit" style="vertical-align:text-bottom;" src="${resource(dir:'images/skin',file:'pencil.png')}"/></span>
                          </g:if>
                          <g:else>
                            <span id="updateHours" title="${m.id}"><g:formatNumber number="${m?.hours}" format="###"/></span>
                          </g:else>
                        </td>
                        <td>
                            <g:if test="${(!session.mode.equalsIgnoreCase('budget')) || (session.mode.equalsIgnoreCase('budget') && !a.isBudgetLocked()) || (session.mode.equalsIgnoreCase('budget') && a.isBudgetLocked() && !worksInProjects)}">
                              <span id="percentageWorkUpArrowCourse" class="editableFiguresArrowHours" title="${m?.id}" ><img title="+1%" alt="up" style="vertical-align:text-right;" src="${resource(dir:'images',file:'up2.png')}"/></span>
                              <span id="percentageWorkDownArrowCourse" class="editableFiguresArrowHours" title="${m?.id}" ><img title="-1%" alt="down" style="vertical-align:text-right;" src="${resource(dir:'images',file:'down2.png')}"/></span>
                              <span class="hoursFigures" id="updateProjectPercentage" title="${m.id}"><g:formatNumber number="${m?.percentagePerProject()}" format="###"/><img title="Edit" alt="edit" style="vertical-align:text-bottom;" src="${resource(dir:'images/skin',file:'pencil.png')}"/></span>
                            </g:if>
                            <g:else>
                              <span id="updateProjectPercentage" title="${m.id}"><g:formatNumber number="${m?.percentagePerProject()}" format="###"/></span></g:else>
                        </td>
                      </tr>
                    </g:if>
                  </g:if><g:else></g:else>
                </g:each>
                </tbody>
              </table>
              <table class="total">
                 <tr class="boldFormat">
                       <td width="30%">${Inter.printOut('Total',session.language)}:</td>
                       <td width="30%"><g:formatNumber number="${employeeInstance.actualWorkingHoursCourse()}" format="###"/></td>
                       <td width="18%"><g:formatNumber number="${employeeInstance.actualWorkingPercentageCourse()}" format="###"/></td>
                  </tr>
              </table>
          </g:if>

    <!-- TOTAL ASSIGNED WORKLOAD --->
          <g:if test="${ModeAccess.isAvailableInCurrentMode(session.mode,0)}">
              <table class="distanceFormat total" style="table-layout: fixed">
                <tbody>
                    <tr class="veryboldFormat">
                       <td width="30%">${Inter.printOut('Total Assigned Work',session.language)}:</td>
                       <td width="30%"><g:formatNumber number="${employeeInstance.actualWorkingHoursPerYear()}" format="###"/></td>
                       <td width="18%"><g:formatNumber number="${employeeInstance.actualWorkingPercentagePerYear()}" format="###"/></td>
                    </tr>
                </tbody>
              </table>
          </g:if>
      </div> <!-- close tag div with style -->
    </div> <!-- close tag div "showEmpl" -->
    <g:if test="${!ajaxCall}">
    </div><!-- close tag div "body" -->
  </body>
</html>
    </g:if>
